﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>浮动问题</title>
    <style type="text/css">
	#demo{
		  width:1000px;
		  height:30px;
		  overflow:hidden;
		  line-height:30px;
		  font-size:13px;
		  font-family:'宋体';
		  
		  color:#0C77CF;
		  font-weight:bold;
		  margin: 0 auto;
		}
	#demoin {
	  width: 900px;
	  height: 30px;
	  margin: 0 auto;
	  white-space: nowrap;
	  overflow: hidden;
	}
	 #demo #demo2{display:inline}
    </style>
  </head>
   
  <body>
    <div id="demo">
	   <div id="demoin">
		 <div id="demo1">
		   <img src="img/1.gif" data-url="#">
			<img src="img/2.gif" data-url="#">
			<img src="img/3.gif" data-url="#">
			<img src="img/4.gif" data-url="#">
			<img src="img/5.png" data-url="#">	
			<img src="img/1.gif" data-url="#">
			<img src="img/2.gif" data-url="#">
			<img src="img/3.gif" data-url="#">
			<img src="img/4.gif" data-url="#">
			<img src="img/5.png" data-url="#">
		 </div>
		 <div id="demo2"></div>
	   </div>
	 </div>
	<script src="./js/jquery-1.9.0.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      window.onload = function(){
		   //scrollLeft();
		   scroll();
		 };
		 function scrollLeft(){
		   var speed = 20;
		   //var tab = document.getElementById('demoin');
		   var tab = $("#demoin")[0];
		   //var tab1 = document.getElementById('demo1');
		   var tab1 = $("#demo1")[0];
		   var tab2 = $("#demo2")[0];
		   //var tab2 = document.getElementById('demo2');
		   tab2.innerHTML = tab1.innerHTML;
		   function Marquee(){
			 if(tab2.offsetWidth - tab.scrollLeft <=0) {    
			   tab.scrollLeft = 0;
			 }else{
			   tab.scrollLeft ++;
			 }
		 
		   }
		   var timer = setInterval(Marquee,speed);
		   tab.onmouseover = function(){
			 clearInterval(timer);
		   };
		   tab.onmouseout = function(){
			 timer = setInterval(Marquee,speed);
		   }
		 }
      function scroll(){
		   var speed = 20;
		   $("#demo2").html($("#demo1").html());//把第一个元素的内容填充到第二个元素中。
		   function Marquee(){
			 var n = $("#demoin").scrollLeft();//获取外层div的滚动左侧位置。
			 //console.log("**width**"+$("#demo2").width());
			 //console.log("**scroll**"+$("#demoin").scrollLeft());
			 if($("#demo2").width() - n <=0) {  //如果第二个div的宽度大于滚动条的起始位置。  
			   $("#demoin").scrollLeft(0)//滚动条的左侧置为0
			 }else{
				var num = $("#demoin").scrollLeft();//获取滚动条的左侧起始位置。并将其赋值自动 +1；
				num++;
				$("#demoin").scrollLeft(num);			  //初始化滚动条左侧的位置。左移1个位置。
			 }		 
		   }
		   var timer = setInterval(Marquee,speed);//启动定时器，间隔指定的数值 speed一次。
		   $("#demoin").on('mouseover', function(){//鼠标移入展示区域，清楚滚动事件。
			 clearInterval(timer);
		   });
		   $("#demoin").on('mouseout', function(){//鼠标移出展示区域，重新加载定时器。
			 timer = setInterval(Marquee,speed);
		   });
		 }
    </script>
  </body>
</html>